{% extends 'base.html' %}

{% block title %}歌曲管理 - Will's Blog{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="gradient-text fw-bold mb-4">游戏歌曲管理</h1>

    <!-- 添加歌曲表单 -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>添加新歌曲</h5>
        </div>
        <div class="card-body">
            <form id="addSongForm">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="title" class="form-label">标题 *</label>
                        <input type="text" class="form-control" id="title" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="artist" class="form-label">艺术家 *</label>
                        <input type="text" class="form-control" id="artist" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="difficulty" class="form-label">难度</label>
                        <select class="form-control" id="difficulty">
                            <option value="Easy">Easy</option>
                            <option value="Normal" selected>Normal</option>
                            <option value="Hard">Hard</option>
                            <option value="Expert">Expert</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="level" class="form-label">等级 (1-10)</label>
                        <input type="number" class="form-control" id="level" min="1" max="10" value="5">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="chart_file" class="form-label">谱面文件名 * (在static/game/charts/目录下)</label>
                        <input type="text" class="form-control" id="chart_file" placeholder="example.json" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="audio_file" class="form-label">音频文件名 * (在static/game/songs/目录下)</label>
                        <input type="text" class="form-control" id="audio_file" placeholder="song.flac" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">添加歌曲</button>
            </form>
        </div>
    </div>

    <!-- 歌曲列表 -->
    <div class="card">
        <div class="card-header">
            <h5>歌曲列表</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>艺术家</th>
                            <th>难度</th>
                            <th>等级</th>
                            <th>谱面文件</th>
                            <th>音频文件</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="songsList">
                        {% for song in songs %}
                        <tr data-song-id="{{ song.id }}">
                            <td>{{ song.id }}</td>
                            <td>{{ song.title }}</td>
                            <td>{{ song.artist }}</td>
                            <td>{{ song.difficulty }}</td>
                            <td>{{ song.level }}</td>
                            <td>{{ song.chart_file }}</td>
                            <td>{{ song.audio_file }}</td>
                            <td>
                                <button class="btn btn-sm btn-danger delete-song" data-song-id="{{ song.id }}">删除</button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="8" class="text-center">暂无歌曲</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-3">
        <a href="{{ url_for('game.index') }}" class="btn btn-secondary">返回游戏</a>
    </div>
</div>

<script>
// 添加歌曲
document.getElementById('addSongForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const data = {
        title: document.getElementById('title').value,
        artist: document.getElementById('artist').value,
        difficulty: document.getElementById('difficulty').value,
        level: parseInt(document.getElementById('level').value),
        chart_file: document.getElementById('chart_file').value,
        audio_file: document.getElementById('audio_file').value
    };

    try {
        const response = await fetch('{{ url_for("game.add_song") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (result.success) {
            alert('添加成功！');
            location.reload();
        } else {
            alert('添加失败: ' + result.error);
        }
    } catch (error) {
        alert('添加失败: ' + error.message);
    }
});

// 删除歌曲
document.querySelectorAll('.delete-song').forEach(button => {
    button.addEventListener('click', async function() {
        const songId = this.getAttribute('data-song-id');

        if (!confirm('确认删除这首歌曲吗？')) {
            return;
        }

        try {
            const response = await fetch(`{{ url_for('game.delete_song', song_id=0) }}`.replace('0', songId), {
                method: 'DELETE'
            });

            const result = await response.json();

            if (result.success) {
                alert('删除成功！');
                location.reload();
            } else {
                alert('删除失败: ' + result.error);
            }
        } catch (error) {
            alert('删除失败: ' + error.message);
        }
    });
});
</script>
{% endblock %}
